<template>
    <div>

        <el-menu default-active="/Home" :unique-opened="true" :collapse="isCollapse" background-color="#0624e7"
            text-color="#fff" active-text-color="#ffd04b" class="menu" menu-trigger="click" router>
            <div v-for="item in menu" :key="item.id">
                <el-menu-item v-if="item.type == 1" :index="'/' + item.path" @click="addTabs(item)">
                    <i :class="item.icon"></i>
                    <span slot="title">
                        &nbsp;&nbsp;&nbsp;&nbsp;{{ item.name }}</span>
                </el-menu-item>
                <el-submenu v-if="item.type == 0" :index="'/' + item.children[0].path">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">&nbsp;&nbsp;&nbsp;&nbsp;{{ item.name }}</span>
                    </template>
                    <div v-for="child in item.children" :key="child.id">
                        <el-menu-item :index="'/' + child.path" @click="addTabs(child)">
                            <i :class="child.icon"></i>
                            <span slot="title">{{ child.name }}</span>

                        </el-menu-item>
                    </div>

                </el-submenu>
            </div>
        </el-menu>
    </div>
</template>
<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Aside',
    props: {
        isCollapse: Boolean
    }, computed: {
        menu: {
            get() {
                return this.$store.state.menuList;
            }
        }
    }, mounted() {
        console.log(this.menu)
    },
    methods: {
       addTabs(item) { 
        this.$store.commit('addTab', item);
       }
    }
}
</script>
<style>
.menu {
    height: 100%;
    color:#0624e7;
}
</style>